Sesion 6

Introduction to Bootstrap

Sesion 7

Intermediate Boostrap

Get inspiration in:

Dribbble:

https://dribbble.com/

Awwards:

https://www.awwwards.com/

Wireframes

Wireframes Sheets, to print Sneakpeekit

Dowload sources to print, here are sheets for do wireframes https://sneakpeekit.com/

Wireframes digital Tool Balsamiq

Here we can design our wireframes online with an digital tool https://balsamiq.cloud/

Flex box Guide

I'ts give you a good idea about this method.
Look for the guide of Flex box https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-bugs

Grid system Bootstrap

Grid options

Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follows:

  1. Extra small (xs)
  2. Small (sm)
  3. Medium (md)
  4. Large (lg)
  5. Extra large (xl)
  6. Extra extra large (xxl)

Columns with "Col", non responsive columns

They could be 16 columns

col (col=auto)
col
col-6
col-3
col-2
col-1

Columns with "Col-md", responsive columns

They could be 16 columns like non responsive columns

col-md (col-md=auto)
col-md
col-md-6
col-md-3
col-md-2
col-md-1

Columns with "col-lg col-md col-sm", responsive columns

col-lg col-md col-sm (col-lg=auto)
col-lg col-md col-sm
col-lg-6 col-md-6 col-sm-6
col-lg-3 col-md-6 col-sm-6
col-lg-2 col-md-6 col-sm-12
col-lg-1 col-md-6 col-sm-12

Example x1

col-lg-3 col-md-4 col-sm-6
col-lg-3 col-md-4 col-sm-6
col-lg-3 col-md-4 col-sm-6
col-lg-3 col-md-4 col-sm-6

Example x2

col-lg-2 col-md-3 col-sm-12
col-lg-2 col-md-3 col-sm-12
col-lg-2 col-md-3 col-sm-12
col-lg-2 col-md-3 col-sm-12
col-lg-2 col-md-3 col-sm-12
col-lg-2 col-md-3 col-sm-12

Contaniers

Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.

How they work

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.

Bootstrap comes with three different containers:

  • .container, which sets a max-width at each responsive breakpoint
  • .container-{breakpoint}, which is width: 100% until the specified breakpoint
  • .container-fluid, which is width: 100% at all breakpoints
 Boostrap Container documentation

Container

(Inside, row>col-xxx)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Container-fluid

(Inside, row>col-xxx)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Container

(Outside, row>col-xxx)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Container-fluid

(Outside, row>col-xxx)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Font-Awesome

Font Awesome is a font and icon toolkit based on CSS and Less. As of 2020, Font Awesome was used by 38% of sites that use third-party font scripts, placing Font Awesome in second place after Google Fonts.

Like Bootstrap, You have to add Font-awesome to your project to use it

They have a CDN to do that https://fontawesome.com/start